<template>
  <div class="task-management">
    <!-- 搜索栏 -->
    <div class="search-bar">
      <el-input
          v-model="searchQuery"
          placeholder="搜索任务"
          style="width: 300px; margin-right: 20px;"
      />
      <el-button type="primary" @click="openCreateDialog">创建任务</el-button>
    </div>

    <!-- 任务列表 -->
    <el-table :data="filteredTasks" style="width: 100%">
      <el-table-column prop="name" label="任务名称" />
      <el-table-column prop="assignee" label="负责人" />
      <el-table-column prop="status" label="状态" />
      <el-table-column prop="dueDate" label="截止日期" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button @click="openEditDialog(scope.row)">编辑</el-button>
          <el-button type="danger" @click="deleteTask(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 任务详情 -->
    <el-dialog v-model="detailVisible" title="任务详情" width="50%">
      <div v-if="selectedTask">
        <h3>{{ selectedTask.name }}</h3>
        <p><strong>负责人：</strong>{{ selectedTask.assignee }}</p>
        <p><strong>状态：</strong>{{ selectedTask.status }}</p>
        <p><strong>截止日期：</strong>{{ selectedTask.dueDate }}</p>
        <p><strong>描述：</strong>{{ selectedTask.description }}</p>
      </div>
    </el-dialog>

    <!-- 创建/编辑任务弹窗 -->
    <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑任务' : '创建任务'" width="50%">
      <el-form :model="taskForm" label-width="80px">
        <el-form-item label="任务名称">
          <el-input v-model="taskForm.name" />
        </el-form-item>
        <el-form-item label="负责人">
          <el-input v-model="taskForm.assignee" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="taskForm.status">
            <el-option label="未开始" value="未开始" />
            <el-option label="进行中" value="进行中" />
            <el-option label="已完成" value="已完成" />
          </el-select>
        </el-form-item>
        <el-form-item label="截止日期">
          <el-date-picker v-model="taskForm.dueDate" type="date" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="taskForm.description" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveTask">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// 任务数据
const tasks = ref([
  { id: 1, name: '任务1', assignee: '张三', status: '进行中', dueDate: '2023-10-31', description: '这是一个示例任务。' },
  { id: 2, name: '任务2', assignee: '李四', status: '已完成', dueDate: '2023-10-25', description: '这是另一个示例任务。' },
]);

// 搜索条件
const searchQuery = ref('');

// 筛选后的任务列表
const filteredTasks = computed(() => {
  return tasks.value.filter(task =>
      task.name.toLowerCase().includes(searchQuery.value.toLowerCase())
  );
});

// 任务详情
const selectedTask = ref(null);
const detailVisible = ref(false);

// 创建/编辑任务
const dialogVisible = ref(false);
const isEdit = ref(false);
const taskForm = ref({
  id: null,
  name: '',
  assignee: '',
  status: '',
  dueDate: '',
  description: '',
});

// 打开创建任务弹窗
const openCreateDialog = () => {
  taskForm.value = {
    id: null,
    name: '',
    assignee: '',
    status: '',
    dueDate: '',
    description: '',
  };
  isEdit.value = false;
  dialogVisible.value = true;
};

// 打开编辑任务弹窗
const openEditDialog = (task) => {
  taskForm.value = { ...task };
  isEdit.value = true;
  dialogVisible.value = true;
};

// 保存任务
const saveTask = () => {
  if (isEdit.value) {
    // 更新任务
    const index = tasks.value.findIndex(task => task.id === taskForm.value.id);
    tasks.value.splice(index, 1, taskForm.value);
  } else {
    // 创建任务
    taskForm.value.id = tasks.value.length + 1;
    tasks.value.push(taskForm.value);
  }
  dialogVisible.value = false;
};

// 删除任务
const deleteTask = (task) => {
  const index = tasks.value.findIndex(t => t.id === task.id);
  tasks.value.splice(index, 1);
};

// 查看任务详情
const showTaskDetail = (task) => {
  selectedTask.value = task;
  detailVisible.value = true;
};
</script>

<style scoped>
.task-management {
  padding: 20px;
}

.search-bar {
  margin-bottom: 20px;
}
</style>